<template>
    <a-layout-header class="Header"
        :style="{ backgroundColor: token.colorBgContainer, borderBottom: '1px solid ' + token.colorBorderSecondary }">
        <a-flex justify="space-between">
            <slot name="Logo">
                <a-flex justify="space-between" align="center" :style="{ height: '48px', padding: '8px' }">
                    <img src="./CS.png" style="height:28px;margin-left: 8px;" alt="">
                    <span class="LogoTitle">Corner Stone</span>
                </a-flex>
            </slot>
            <div style="width: 100%; line-height: 48px;">
                <slot name="CenterMenu"></slot>
            </div>
            <slot name="Setting">
                <a-flex justify="space-between" align="center" :style="{ height: '48px', padding: '8px' }">
                    <PluginComp Plugin="Theme.Button" />
                    <PluginComp Plugin="User.Logout" />
                </a-flex>
            </slot>
        </a-flex>
    </a-layout-header>
</template>

<script setup>
import { theme } from 'ant-design-vue';
const { useToken } = theme;
const { token } = useToken();
</script>

<style lang="less" scoped>
.Header {
    padding: 0;
    height: 48px;
}

.LogoTitle {
    white-space: nowrap;
    font-size: 20px;
    margin-left: 16px;
    font-weight: bold;
}
</style>